<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
    pageEncoding="ISO-8859-1"%>
        <%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="form" uri="http://www.springframework.org/tags/form" %>
<%@ taglib prefix="spring" uri="http://www.springframework.org/tags"%>


<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<script
	src="${pageContext.request.contextPath}/resources/Js/jquery-1.6.1.min.js"></script>
<c:url var="findhallmovieURL" value="/movie/getmovieslist" />
<c:url var="findshowmovieURL" value="/movie/getshowlist" /> 
<c:url var="calculatepriceURL" value="/movie/calculateprice" /> 
<script type="text/javascript">
$(document).ready(function() { 
	$('#halldet').change(
		function() {
			$.getJSON('${findhallmovieURL}', {
				hallid : $(this).val(),
				ajax : 'true'
			}, function(data) {
				var html = '<option value="">Select Movie</option>';
				var len = data.length;
				//alert(len);
				for ( var i = 0; i < len; i++) {
					html += '<option value="' + data[i].id + '">'
							+ data[i].moviename + '</option>';
				}
				html += '</option>';
 
				$('#moviedet').html(html);
			});
		});

	$('#moviedet').change(
			function() {
				$.getJSON('${findshowmovieURL}', {
					movieid : $(this).val(),
					ajax : 'true'
				}, function(data) {
					var html = '<option value="">Select Show</option>';
					var len = data.length;
					//alert(len);
					for ( var i = 0; i < len; i++) {
						html += '<option value="' + data[i].id + '">'
								+ data[i].showtime + '</option>';
					}
					html += '</option>';
	 
					$('#showdet').html(html);
				});
			});

	$('#showdet').change(
			function() {
				$.getJSON('${calculatepriceURL}', {
					showid : $(this).val(),					
					ajax : 'true'
				}, function(data) {
					document.getElementById("hiddenprice").value=data;
				});
			});
});

function calculateprice(){
	var pprice=document.getElementById("hiddenprice").value;
	var noofseat=document.getElementById("noofseat").value;
	document.getElementById("price").value=Number(pprice)*Number(noofseat);
}

</script>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Online Movies - Ticket Booking</title>
<meta name="keywords" content="Free CSS Template, Website Templates, Music Websites" />
<meta name="description" content="Free CSS Template for Music Websites" />
<link href="${pageContext.request.contextPath}/resources/css/templatemo_style.css" rel="stylesheet" type="text/css" />
<style type="text/css">
body,td,th {
	font-size: 14px;
}
</style>
</head>
<body>
<form:form method="post" modelAttribute="bookingdetails" action="movie/savetocart">
<div id="templatemo_container">

	<div id="templatemo_header">
    	<div id="templatemo_title">
            <div id="templatemo_sitetitle">Online<span>Movies</span></div>
        </div>
        <spring:url value="/logout" var="logout_url" htmlEscape="true" />
         <div id="templatemo_login" align="right">
        	Welcome <label>${username}</label> | <a href="${logout_url}">Log Out</a>
        </div>
    </div>
    
    <div id="templatemo_banner">
       	<div id="templatemo_banner_text">
            <div id="banner_title">Welcome To Online Movie Ticket Booking</div>
            <p>
            This is a site for booking your ticket online
          </p>
            
    	</div>
	</div>
	   <spring:url value="/registration" var="registration_url" htmlEscape="true" />
     <spring:url value="/" var="index_url" htmlEscape="true" />
      <spring:url value="/selectmovie" var="booking_url" htmlEscape="true" />
      <spring:url value="/hall" var="hall_url" htmlEscape="true" />
      <spring:url value="/movie" var="movie_url" htmlEscape="true" />
    
    <div id="templatemo_menu">
     	<ul>
			<li><a href="${index_url}" >Main Page</a></li>
			<li><a href="${registration_url}">Registration</a></li>
            <li><a href="${booking_url}" class="current">Booking Details</a></li>
            <li><a href="${hall_url}">Show Setails</a></li>  
            <li><a href="${movie_url}">Movie details</a></li>      
            <li><a href="subpage.html" class="lastmenu">Contact</a></li>        
        </ul>  
    </div>
    
     <div style="" align="center">
    
    	 <label>${bookingDetailsMessage}</label>
            
 <div class="input_filld" align="left" style="width:500px">
				
					<table style="margin-top: 20px; margin-bottom: 20px;">
						<tr>
							<td><label>Movie Date</label></td>
							<td><input type="text" name="showdate" id="showdate" value="${movienshowdate}"/></td>
						</tr>
						<tr>
							
							<td><label>Select Location</label></td>
							<td>
								<form:select path="hallDetails.id" id="halldet">
									<form:option value="" label="Select Hall"/>
									<form:options items="${hallList}" itemLabel="det" itemValue="id"/>
								</form:select>
							</td>
						</tr>
						<tr>
							<td><label>Select Movie</label></td>
							<td><form:select path="movieDetails.id" id="moviedet"></form:select></td>
						</tr>
						<tr>
							<td><label>Select Showtime</label></td>
							<td><form:select path="showDetails.id" id="showdet"></form:select></td>
						</tr>
						<tr>
							<td>
								<input type="hidden" name="hiddenprice" id="hiddenprice" value=""/>
								<label>No of person :</label>
							</td>
							<td>
								<div class="input_filld">
									 <input type="text" name="noofseat" id="noofseat" value="" onblur="calculateprice()" />
								</div>
							</td>
							</tr>
						<tr>
							<td><label>Total price :</label></td>
							<td>
								<div class="input_filld">
									 <input type="text" name="price" id="price" value="" disabled="disabled"/>
								</div>
							</td>
						</tr>
						<tr>
							<td colspan="2">
								<p><input style="width: 80%;" class="button" type="submit" name="submit" value="Check Out" /></p>			
							</td>
						</tr>
					</table>
					
				</div> 
   </div>
				
				 
				  <h2 style="size: 10px;text-align: left">Booking History</h2>
     
    <table border="1" align="center" cellspacing="0" >
        <tr>
            <th>Movie Name</th>
            <th>Location</th>
            <th>City</th>
            <th>Hall Name</th>
            <th>Show Date</th>
            <th>Show Time</th>
            <th>No Of Persons</th>
            <th>Price</th>
        </tr>
         
        <c:forEach items="${bookingDetails}" var="bookingDetailsVar" varStatus="status">
         
        <tr>
            <td>${bookingDetailsVar.movieDetails.moviename}</td>
            <td>${bookingDetailsVar.hallDetails.location}</td>
            <td>${bookingDetailsVar.hallDetails.city}</td>
            <td>${bookingDetailsVar.hallDetails.hallname}</td>
            <td>${bookingDetailsVar.showdate}</td>
            <td>${bookingDetailsVar.showtime}</td>
            <td>${bookingDetailsVar.noofseat}</td>
            <td>${bookingDetailsVar.price}</td>
        </tr>
         
        </c:forEach>
         
    </table>	<br/><div id="templatemo_footer">
        <a href="#">Home</a> | <a href="#">Videos</a> | <a href="#">Audios</a> | <a href="#">Albums</a> | <a href="#">Artists</a> | <a href="#">Contact</a><br />
       
	</div>
    
</div>
</form:form>


</body>
</html>